@mixin checkbox-variant($box, $check, $label) {
	label {
		color: $label;
	}

	label > .box {
		border-color: $box;
	}

	label > .check {
		border-color: $check;
	}
}

@mixin checkbox-label-variant($color) {
	label {
		color: $color;
	}
}

.md-checkbox {
	position: relative;

	// Inline checkbox

	&.md-checkbox-inline {
		display: inline-block;
	}

	.form-inline &.md-checkbox-inline {
		margin-right: 20px;
		top: 3px;
	}

	input[type=checkbox] {
		visibility: hidden;
		position: absolute;
	}

	label {
		cursor: pointer;
		padding-left: 30px;
	}

	label > span {
		display: block;
		position: absolute;
		left: 0;
		-webkit-transition-duration: 0.3s;
		-moz-transition-duration: 0.3s;
		transition-duration: 0.3s;
	}

	label > span.inc {
		background: #fff;
		left: -20px;
		top: -20px;
		height: 60px;
		width: 60px;
		opacity: 0;
		border-radius: 50% !important;
		-moz-border-radius: 50% !important;
		-webkit-border-radius: 50% !important;
	}

	label > .box {
		top: 0px;
		border: 2px solid $input-md-checkbox-box-color;
		height: 20px;
		width: 20px;
		z-index: 5;
		-webkit-transition-delay: 0.2s;
		-moz-transition-delay: 0.2s;
		transition-delay: 0.2s;
	}

	label > .check {
		top: -4px;
		left: 6px;
		width: 10px;
		height: 20px;
		border: 2px solid $input-md-focus-border;
		border-top: none;
		border-left: none;
		opacity: 0;
		z-index: 5;
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		transform: rotate(180deg);
		-webkit-transition-delay: 0.3s;
		-moz-transition-delay: 0.3s;
		transition-delay: 0.3s;
	}

	/* handling click events */

	/* when checkbox is checked */
	label > span.inc {
		-webkit-animation: growCircle 0.3s ease;
		-moz-animation: growCircle 0.3s ease;
		animation: growCircle 0.3s ease;
	}

	input[type=checkbox]:checked ~ label > .box {
		opacity: 0;
		-webkit-transform: scale(0) rotate(-180deg);
		-moz-transform: scale(0) rotate(-180deg);
		transform: scale(0) rotate(-180deg);
	}

	input[type=checkbox]:checked ~ label > .check {
		opacity: 1;
		-webkit-transform: scale(1) rotate(45deg);
		-moz-transform: scale(1) rotate(45deg);
		transform: scale(1) rotate(45deg);
	}

	// Disabled state
	input[type=checkbox]:disabled ~ label,
	input[type=checkbox][disabled] ~ label {
		cursor: not-allowed;
		@include opacity($input-md-checkbox-disabled-opacity);
	}

	input[type=checkbox]:disabled ~ label > .box,
	input[type=checkbox][disabled] ~ label > .box {
		cursor: not-allowed;
		@include opacity($input-md-checkbox-disabled-opacity);
	}

	input[type=checkbox]:disabled:checked ~ label > .check,
	input[type=checkbox][disabled]:checked ~ label > .check {
		cursor: not-allowed;
		@include opacity($input-md-checkbox-disabled-opacity);
	}
}

// Error states
//checkbox-variant($box, $check, $label)

.has-error .md-checkbox,
.has-error.md-checkbox {
	@include checkbox-variant($state-danger-text, $state-danger-text, $state-danger-text);
}

.has-success .md-checkbox,
.has-success.md-checkbox {
	@include checkbox-variant($state-success-text, $state-success-text, $state-success-text);
}

.has-warning .md-checkbox,
.has-warning.md-checkbox {
	@include checkbox-variant($state-warning-text, $state-warning-text, $state-warning-text);
}

.has-info .md-checkbox,
.has-info.md-checkbox {
	@include checkbox-variant($state-info-text, $state-info-text, $state-info-text);
}

.form-md-checkboxes {
	padding-top: 5px;

	> label {
		font-size: $input-md-label-font-size;
		color: $input-md-label-color;
		@include opacity($input-md-label-opacity);
	}

	&.has-error {
		@if $theme-type == "material-design" {
			@include checkbox-label-variant($state-danger-bg);
		} @else {
			@include checkbox-label-variant($brand-danger);
		}
	}

	&.has-info {
		@if $theme-type == "material-design" {
			@include checkbox-label-variant($state-info-bg);
		} @else {
			@include checkbox-label-variant($brand-info);
		}
	}

	&.has-success {
		@if $theme-type == "material-design" {
			@include checkbox-label-variant($state-success-bg);
		} @else {
			@include checkbox-label-variant($brand-success);
		}
	}

	&.has-warning {
		@if $theme-type == "material-design" {
			@include checkbox-label-variant($state-warning-bg);
		} @else {
			@include checkbox-label-variant($brand-warning);
		}
	}
}

.md-checkbox-list {
	margin: 5px 0 5px 0;

	.form-horizontal & {
		margin-top: 5px;
	}

	.md-checkbox {
		display: block;
		margin-bottom: 10px;

		&:last-child {
			margin-bottom: 0;
		}
	}
}

.md-checkbox-inline {
	margin: 5px 0 5px 0;

	.form-horizontal & {
		margin-top: 7px;
	}

	.md-checkbox {
		display: inline-block;
		margin-right: 20px;

		&:last-child {
			margin-right: 0;
		}
	}
}

/* bubble animation */

@-webkit-keyframes growCircle {
	0%, 100% {
		-webkit-transform: scale(0);
		opacity: 1
	}
	70% {
		background: #eee;
		-webkit-transform: scale(1.25);
	}
}

@-moz-keyframes growCircle {
	0%, 100% {
		-moz-transform: scale(0);
		opacity: 1
	}
	70% {
		background: #eee;
		-moz-transform: scale(1.25);
	}
}

@keyframes growCircle {
	0%, 100% {
		transform: scale(0);
		opacity: 1
	}
	70% {
		background: #eee;
		transform: scale(1.25);
	}
}